<template>
  <el-dialog
    :custom-class="'org-tree-dialog'"
    :visible.sync="show"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :title="'请选择'+ title"
    width="40%"
    @close="closeDialog"
    @cancel="closeDialog"
  >
    <div class="org-tree-box flex-center">
      <div class="left-box">
        <div class="filter--box">
          <el-input
            placeholder="请输入部门名称"
            v-model="keyword">
          </el-input>
        </div>

        <el-tree
          :data="treeData"
          show-checkbox
          default-expand-all
          node-key="id"
          ref="tree"
          highlight-current
          :filter-node-method="filterNode"
          @check="setValue"
          :check-strictly="true"
          :props="orgIds">
        </el-tree>
      </div>
      <div class="right-box">
        <div class="sel-length">已选择：<span style="padding:0 5px">{{values.length || 0}}</span></div>
        <div class="selected-box">
          <div class="sel-item"  v-for="(vitem, key) in values"  :key="key">
            {{vitem.deptName}}
            <span class="el-icon-close icon-close" @click="delItem(vitem)"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-box flex-center">
      <el-button class="btn" @click="closeDialog" >取 消</el-button>
      <el-button class="btn" type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import{getAuthDeptList}from"@/api/system/user"
  export default {
    name: "index",
    props: {
      show:{
        type: Boolean,
        default: false,
      },
      title:{
        type: String,
        default: '组织结构',
      },
      orgType: {
        type: String,
        default: '',
      },
      orgData: {
        type: Array,
        default: () => []
      },
      orgIds:{
        type: Array,
        default: () => []
      },
      nowUnitId:{
        type: Number,
        default: null,
      }
    },
    watch: {
      keyword(val) {
        this.$refs.tree.filter(val);
      }
    },
    data(){
      return{
        keyword: '', //按部门名称模糊查询
        treeData:[],
        values:[],
        validDeptIds: [] //权限部门ids
      }
    },
    methods:{
      filterNode(value, data){
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      closeDialog(){
        this.$emit('close')
      },
      save(){
        if((this.orgType == '1' || this.orgType == '2' || this.orgType == '3' )&& this.values.length >1){
          this.$message({
            showClose: true,
            message: `不能选择多个${this.title}！`
          });
          return
        }
        this.$emit('save',this.values)
      },
      // 选择节点
      setValue(data){
        let curCheckedValues = this.$refs.tree.getCheckedNodes();
        this.values = curCheckedValues
      },
      // 删除节点
      delItem(data){
        let f_index = this.values.findIndex(item=>item.id == data.id)
        this.values.splice(f_index, 1)
        let ids = this.values.map(item=>item.id)
        this.$refs.tree.setCheckedKeys(ids);
      },
      initData(data,parentIds,deptName){
        if(data.length) {
          data.forEach(item=>{
            item.parentIds  =  parentIds
            if(deptName && deptName!='昌泰集团'){
              item.deptName = `${deptName}/${item.label}`
            }else{
              item.deptName = `${item.label}`
            }
            if(item.children){
              this.initData(item.children,`${parentIds},${item.id}`, `${item.deptName}`)
            }
          })
        }
      },
      // 查询用户部门
      getAuthDept() {
        return new Promise((resolve,reject)=>{
          getAuthDeptList().then(resp => {
            this.validDeptIds = resp.data
            resolve()
          })
        })
      }
    },
    created() {
      this.treeData = this.orgData
      this.$nextTick(()=>{
        this.getAuthDept().then(()=>{
          this.initData(this.treeData,0)
        })
        this.$refs.tree.setCheckedKeys(this.orgIds);
        this.values = this.$refs.tree.getCheckedNodes()
      })
    },

  }
</script>

<style scoped lang="scss">
  @import '../../assets/styles/org-tree.scss';
</style>
